<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body>
	<p>该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。</p>
	<div class="btn-group">
		<button type="button" class="btn btn-default">Button1</button>
		<button type="button" class="btn btn-success">Button2</button>
	</div>

	<!-- 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 -->
	<div class="btn-toolbar" role="toolbar">
		<div class="btn-group">...</div>
		<div class="btn-group">...</div>
	</div>

	<!-- 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 -->
	<div class="btn-group btn-group-lg">Button1</div>
	<div class="btn-group btn-group-sm">Button2</div>
	<div class="btn-group btn-group-xs">Button3</div>

	<!-- 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 -->
	<div class="btn-group-vertical">...</div>
	<br>
	<!-- 按钮组的使用 -->
	<div class="btn-group">
		<button type="button" class="btn btn-default">按钮1</button>
		<button type="button" class="btn btn-default">按钮2</button>
		<button type="button" class="btn btn-default">按钮3</button>
	</div>
	
	<!-- 按钮工具栏 -->
	<div class="toolbar" rolw="toolbar">
		<div class="btn-group">
			<button type="button" class="btn btn-default">按钮1</button>
			<button type="button" class="btn btn-default">按钮2</button>
			<button type="button" class="btn btn-default">按钮3</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">按钮4</button>
			<button type="button" class="btn btn-default">按钮5</button>
			<button type="button" class="btn btn-default">按钮6</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">按钮7</button>
			<button type="button" class="btn btn-default">按钮8</button>
			<button type="button" class="btn btn-default">按钮9</button>
		</div>
	</div>
	<div class="toolbar" rolw="toolbar">
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default">按钮1</button>
			<button type="button" class="btn btn-default">按钮2</button>
			<button type="button" class="btn btn-default">按钮3</button>
		</div>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-default">按钮4</button>
			<button type="button" class="btn btn-default">按钮5</button>
			<button type="button" class="btn btn-default">按钮6</button>
		</div>
		<div class="btn-group btn-group-xs">
			<button type="button" class="btn btn-default">按钮7</button>
			<button type="button" class="btn btn-default">按钮8</button>
			<button type="button" class="btn btn-default">按钮9</button>
		</div>
	</div>
	
	<!-- 嵌套的使用 -->
	<!-- <div class="btn-group"> -->
	<!-- 垂直 -->
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default">按钮1</button>
		<button type="button" class="btn btn-default">按钮2</button>
		<button type="button" class="btn btn-default">按钮3</button>
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				下列
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
			    <li><a href="#">下拉链接 1</a></li>
			    <li><a href="#">下拉链接 2</a></li>
			</ul>
		</div>
	</div>
	<br>
	<div class="btn-group">
		<button type="button" class="btn btn-default">默认</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
			<span class="sr-only">切换下拉菜单</span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">功能</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
	
	<div class="btn-group">
		<button type="button" class="btn btn-primary">原始</button>
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
			<span class="sr-only">切换下拉菜单</span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">功能</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
	<br>
	<div class="btn-group">
		<button type="button" class="btn btn-defalut dropdown-toggle btn-lg" data-toggle="dropdown">
			默认<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">功能</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
			默认<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">功能</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div><div class="btn-group">
		<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">
			默认<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">功能</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
</body>
</html>